<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>TimeSelect 时间选择</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看数据</el-button>
	</el-affix>
	
	<el-divider content-position="left">固定时间点</el-divider><!-- =============================================================== -->
	<p class="desc">提供几个固定的时间点供用户选择</p>
	<p class="desc">使用 el-time-select 标签，然后通过start、end和step指定起始时间，结束时间和步长</p>
	<el-time-select v-model="value" start="08:30" step="00:15" end="18:30" placeholder="Select time"></el-time-select>
	
	<el-divider content-position="left">时间格式</el-divider><!-- =============================================================== -->
	<p class="desc">使用 format 属性来控制时间格式 (小时以及分钟)</p>
	<p class="desc">在 form/DatePicker.html 页面可查看 Day.js 支持的部分格式</p>
	<el-time-select v-model="value2" start="00:00" step="00:30" end="23:59" placeholder="Select time" format="hh:mm A"></el-time-select>
	
	<el-divider content-position="left">固定时间范围</el-divider><!-- =============================================================== -->
	<p class="desc">如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。</p>
	<el-row class="w500">
		<el-form-item label="时间范围：" required>
			<el-col :span="11">
				<el-form-item prop="time1">
					<el-time-select v-model="startTime" :max-time="endTime" placeholder="开始时间" start="08:30" step="00:15" end="18:30"></el-time-select>
				</el-form-item>
			</el-col>
			<el-col :span="2" style="text-align: center;">-</el-col>
			<el-col :span="11">
				<el-form-item prop="time2">
					<el-time-select v-model="endTime" :min-time="startTime" placeholder="结束时间" start="08:30" step="00:15" end="18:30"></el-time-select>
				</el-form-item>
			</el-col>
		</el-form-item>
	</el-row>
	
</div>
</body>
<script>

const Main = {
	data() {
		return {
			value: '09:14',
			value2: '',
			startTime: '',
			endTime: '',
		}
	},
	methods:{
		disabledHours() {
			return 123
		},
		showValue(){
			console.log(this.$data.value, this.$data.value2);
			console.log(this.$data.startTime, this.$data.endTime);
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
